<template>
  <fullScreenContainer :leftList="menuList"  title="湖南省早熟油菜产业大脑" type="fullScreenContainer">

    <template slot="leftContent">
      <Panel key="jdfj11"  title="早熟油菜数据展示"  height="34%">
        <template slot="right">
          <div class="tab-button">
            <button :class="clsx('no-select-button', selectTabs1 === 0 ? 'select-button' : '')"
                    @click="fn('10')">上游</button>
            <button :class="clsx('no-select-button', selectTabs1 === 1 ? 'select-button' : '')"
                    @click="fn('11')">中游</button>
            <button :class="clsx('no-select-button', selectTabs1 === 2 ? 'select-button' : '')"
                    @click="fn('12')">下游</button>
          </div>
        </template>
        <echartsDemo key="left1" :initData="zsycsjzs" :initChart="barChart" ></echartsDemo>
      </Panel>
      <Panel key="jdfj12" title="油菜产品数据采集" height="32%">
        <scroll
          rowStyle="content_tr_center"
          :runSpeed="22"
          :scrollContentHeight="189"
          :columnsConfg="learDataColumnsConfg"
          :rowdata="rowdata"
        >
        </scroll>
      </Panel>
      <Panel key="jdfj13"  title="油菜品种销售价格情况"  height="34%">
        <scroll
          rowStyle="content_tr_center"
          :runSpeed="22"
          :scrollContentHeight="198"
          :columnsConfg="learDataColumnsConfg1"
          :rowdata="rowdata1"
        >
        </scroll>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="jdfj21"  title="县域重点推广油菜品种"  height="34%">
        <template slot="right">
          <cselect v-model="area" :dropList="orgList" @change="orgChange"></cselect>
        </template>
        <echartDemo :initChart="pieChart" :initData="xyzdtgycpz"></echartDemo>
      </Panel>
      <Panel key="jdfj22" title="抗虫害性品种分析" height="32%">
        <img :src="right" class="right">
      </Panel>
      <Panel key="jdfj23"  title="全省油菜种植面积及品种"  height="34%">
        <echartDemo key="right2" :initData="qsyczzmj" :initChart="line" title="万亩"></echartDemo>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <Panel key="jdfj31"  title="易种植高产油菜品种" class="bottom">
        <bar :dataList="yzzgcycpz"></bar>
      </Panel>

    </template>
  </fullScreenContainer>
</template>
<script>
import menuList from './js/menu'
import right from './images/right.png'
import Map from "@/Iframe/kcgis3x.vue";
import echartDemo from "@/echartsDemo/index.vue";
import echartsDemo from "@/echartsDemo/index.vue";
import barChart from '../templateBigScreen2/barChart'
import pieChart from './js/pieChart'
import bar from './bar.vue'
import line from "@/views/templateBigScreen1/line/initChart";
import clsx from 'clsx'
import scroll from "@/views/templateBigScreen/scroll.vue";
import cselect from "@/views/templateBigScreen2/Select/index.vue";
import { getChartData, getGroupChartData,getList } from "@/apis/bigCanolaIndex";

export default {
  components: {
    cselect,
    scroll,
    echartsDemo,
    echartDemo,
    bar,
    Map

  },

  data() {
    return {
      menuList,
      clsx,
      right,
      barChart,
      pieChart,
      line,
      selectTabs1: 0,
      area:'',
      orgList: [
        { label:'全省',value:''},
        { label: '长沙市',value:'长沙市'},
        { label: '株洲市',value:'株洲市'},
        { label: '湘潭市',value:'湘潭市'},
        { label: '衡阳市',value:'衡阳市'},
        { label: '邵阳市',value:'邵阳市'},
        { label: '常德市',value:'常德市'},
        { label: '张家界市',value:'张家界市'},
        { label: '益阳市',value:'益阳市'},
        { label: '郴州市',value:'郴州市'},
        { label: '永州市',value:'永州市'},
        { label: '岳阳市',value:'岳阳市'},
        { label: '怀化市',value:'怀化市'},
        { label: '娄底市',value:'娄底市'},
      ],
      zsycsjzs:{},
      learDataColumnsConfg: [
        {
          label: '公司名称',
          prop: 'label1',
          width: '45%',
          paddingLeft: '0px',
        },
        {
          label: '产品类型',
          prop: 'label2',
          width: '25%',
          paddingLeft: '0px',
        },
        {
          label: '产品名称',
          prop: 'label3',
          width: '20%',
          paddingLeft: '0px',
        },
        {
          label: '操作',
          prop: 'label4',
          width: '15%',
          paddingLeft: '0px',
        },
      ],
      rowdata: [

      ],
      learDataColumnsConfg1: [
        {
          label: '序号',
          prop: 'label1',
          width: '15%',
          paddingLeft: '0px',
        },
        {
          label: '名称',
          prop: 'label2',
          width: '20%',
          paddingLeft: '0px',
        },
        {
          label: '价格',
          prop: 'label3',
          width: '20%',
          paddingLeft: '0px',
        },
        {
          label: '支付方式',
          prop: 'label4',
          width: '20%',
          paddingLeft: '0px',
        },
        {
          label: '门店名称',
          prop: 'label5',
          width: '25%',
          paddingLeft: '0px',
        },
      ],
      rowdata1: [],
      xyzdtgycpz:{
        legendData:['早熟','特早熟'],
        name:"品种",
        seriesData:[
          { value: 1, name: '早熟' },
          { value: 3, name: '特早熟' },
        ]
      },
      qsyczzmj:{
        xAxisData: ['早熟A','特早A','早熟B','特早B'],
        seriesData: [
          {name:'早熟A',value:'4853'},
          {name:'特早A',value:'3533'},
          {name:'早熟B',value:'1053'},
          {name:'特早B',value:'3383'}],
      },
      yzzgcycpz:{}
    }
  },
  created() {
    this.getData();
  },
  methods: {
    fn(type) {
      switch (type) {
        case "10": this.selectTabs1 = 0; this.getChartData1();break;
        case "11": this.selectTabs1 = 1; this.getChartData1(); break;
        case "12": this.selectTabs1 = 2; this.getChartData1(); break;
      }
    },
    getData() {
      this.getChartData1();
      this.getChartData2();
      this.getChartData3();
      this.getChartData4();
      this.getList1();
      this.getList2();
    },
    // 油菜产品数据采集
    getList1(){
      getList({listName:'监测分析-油菜产品数据采集'}).then(res => {
        if(res.data){
          this.rowdata = res.data;
        }
      });
    },

    // 油菜品种销售价格情况
    getList2(){
      getList({listName:'监测分析-油菜品种销售价格情况'}).then(res => {
        if(res.data){
          this.rowdata1 = res.data;
        }
      });
    },
    // 早熟油菜数据展示
    getChartData1(){
      let chartName = "监测分析-早熟油菜数据展示-上游";
      switch (this.selectTabs1) {
        case 0: chartName = "监测分析-早熟油菜数据展示-上游";  break;
        case 1: chartName = "监测分析-早熟油菜数据展示-中游";  break;
        case 2: chartName = "监测分析-早熟油菜数据展示-下游";  break;
      }
      getChartData({chartName:chartName}).then(res => {
        if(res.data){
          let data = this.formatChartData(res.data);
          data.yAxisName = '万元';
          this.zsycsjzs = data;
        }
      });
    },
    // 县域重点推广油菜品种
    getChartData2(){
      getGroupChartData({area:this.area,chartName:'监测分析-县域重点推广油菜品种'}).then(res => {
        if(res.data){
          let data = this.formatChartData(res.data);
          data.name = '品种';
          this.xyzdtgycpz = data;
        }
      });
    },
    // 全省油菜种植面积及品种
    getChartData3(){
      getChartData({chartName:'监测分析-全省油菜种植面积及品种'}).then(res => {
        if(res.data){
          let data = this.formatChartData(res.data);
          this.qsyczzmj = data;
        }
      });
    },
    // 易种植高产油菜品种
    getChartData4(){
      getChartData({chartName:'监测分析-易种植高产油菜品种'}).then(res => {
        if(res.data){
          let seriesData = [];
          let xAxisData = [];
          res.data.forEach(e => {
            seriesData.push(e.value);
            xAxisData.push(e.name);
          });
          this.yzzgcycpz = {
            seriesData:seriesData,
            xAxisData:xAxisData
          };
        }
      });
    },
    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({ "name": e.name, "value": e.value });
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      return result;
    },
    // 机构选择
    orgChange(value){
      this.area  =value;
      this.getChartData2();
    },
  },
  mounted() { },
}
</script>
<style scoped lang="scss">
.bottom{
  left: 5px;
  top: 643px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  padding: 16px 32px;
  gap: 1px;
  z-index: 999999;

}

.right{
  position: absolute;
  height: 237px;
  opacity: 1;
}

.select-button {
  background: rgba(59, 214, 172, 0.49) !important;
  font-weight: bold;
  cursor:pointer;
}

.no-select-button {
  background: rgba(59, 214, 172, 0.1);
  border-radius: 2px;
  color: white;
  padding: 6px;
  border: none;
  cursor:pointer;
}

.tab-button {
  display: flex;
  gap: 6px;
}
</style>
